<template>
  <el-dialog
    @opened="openDialog"
    :width="dialogWidth"
    :title="title"
    :visible.sync="showEditDialog"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-form
      :model="forms"
      :rules="rules"
      ref="editForms"
      class="edit-forms"
      label-position="left"
      :label-width="labelWidth"
    >
      <el-form-item label="订单编号" prop="orderid">
        <el-input v-model="forms.orderid"></el-input>
      </el-form-item>
      <el-form-item label="支付状态" prop="paystatus">
        <el-input v-model="forms.paystatus"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input v-model="forms.status"></el-input>
      </el-form-item>
      <el-form-item label="总金额" prop="fee">
        <el-input v-model="forms.fee"></el-input>
      </el-form-item>
      <el-form-item label="用户id" prop="userid">
        <el-input v-model="forms.userid"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { fillerLeft, resetObject } from "@/utils/common";

export default {
  props: {
    title: {
      type: String,
      default: "编辑"
    },
    dialogWidth: {
      type: String,
      default: "700px"
    },
    labelWidth: {
      type: String,
      default: "120px"
    },
    showEditDialog: Boolean
  },
  data() {
    return {
      forms: {
        orderid: "",
        paystatus: "",
        status: "",
        fee: "",
        userid: "",

      },
      rules: {
        orderid:[{required:true}],
        paystatus: [{required:true}],
        status: [{required:true}],
        fee: [{required:true}],
        userid: [{required:true}]

      }
    };
  },
  methods: {
    submit() {
      this.$refs.editForms.validate(valid => {
        if (valid) {
          this.$message({
            message: "字段验证通过，提交请求，成功后刷新分页！",
            type: "success"
          });
          this.$emit("success"); //通知列表分页刷新
        } else {
          this.$message({
            message: "请按照提示正确填写内容！",
            type: "warning"
          });
          return false;
        }
      });
    },
    openDialog() {
      resetObject(this.forms);
      this.$set(this.forms, "id", null);
      this.$refs.editForms.resetFields();
    },
    FillerFormField(id, data) {
      //可以外部填充回写做编辑用，也可以请求详情接口填充表单
      this.$set(this.forms, "id", id);
      fillerLeft(this.forms, data);
    }
  }
};
</script>
